<template>
    <div>
        <h3 style="margin-bottom: 10px;font-size: 14px;">群发详情</h3>
        <div class="table-wrap">
            <el-table  v-loading="loading" :data="plan_info_table" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                stripe default-expand-all>
                <el-table-column prop="sender" value='999'  label="创建人"></el-table-column>
                <el-table-column prop="status_ch" label="发送状态(员工)" show-overflow-tooltip></el-table-column>
                <el-table-column prop="type_ch" label="通知类型"></el-table-column>
                <el-table-column prop="count" label="目标客户"></el-table-column>
                <el-table-column prop="count_actual" label="预计群发客户"></el-table-column>
                <el-table-column prop="count_sended" label="发送成功数"></el-table-column>
                <el-table-column prop="count_no_send" label="发送失败数"></el-table-column>
                <el-table-column prop="time_date" label="通知员工时间"></el-table-column>
                
            </el-table>
        </div>
        
        
        <!-- <el-row>
            <el-col :span="1.5" style="text-align: right;">
                <div class="grid-content ">&nbsp;&nbsp;创建人:</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content "> {{plan_info.sender}} </div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="1.5" style="text-align: right;">
                <div class="grid-content ">通知状态:</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content ">{{plan_info.status_ch}}</div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="1.5" style="text-align: right;">
                <div class="grid-content ">通知类型:</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content ">{{plan_info.type_ch}}</div>
            </el-col>
        </el-row>

        

        <el-row>
            <el-col :span="1.5" style="text-align: center;">
                <div class="grid-content ">目标客户:</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content ">{{plan_info.count}}</div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="1.5" style="text-align: center;">
                <div class="grid-content ">预计群发客户:</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content ">{{plan_info.count_actual}}</div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="1.5" style="text-align: center;">
                <div class="grid-content ">创建群发失败:</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content ">{{plan_info.type_ch}}</div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="1.5" style="text-align: center;">
                <div class="grid-content ">通知员工时间:</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content ">{{plan_info.time}}</div>
            </el-col>
        </el-row> -->

        <h3 style="font-size: 14px;">数据概况</h3>
       <!-- <div class="scroll-container" style="margin-top: 10px;border:1px solid #000;width:200px;display: inline-block;overflow: hidden;">
            <div class="content">
                <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;" :key="9">
                    <div>
                        <div>预计执行员工</div>
                        <div class="plan_jishu">{{item_yuji_count}}</div>
                        <div>尚未执行员工</div>
                        <div>{{no_send_yuangong}}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="scroll-container" style="margin-top: 10px;border:1px solid #000;margin-left:10px;width:200px;display: inline-block;overflow: hidden;">
            <div class="content">
                <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;" :key="9">
                    <div>
                        <div >预计群发客户</div>
                        <div class="plan_jishu">{{yuji_kehu}}</div>
                        <div>待发送</div>
                        <div>5</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="scroll-container" style="margin-top: 10px;border:1px solid #000;margin-left:10px;width:200px;display: inline-block;overflow: hidden;">
            <div class="content">
                <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;" :key="9">
                    <div>
                        <div>发送成功</div>
                        <div class="plan_jishu">8</div>
                    </div>
                </div>
            </div>
        </div> -->
        
        <el-card class="box-card" style="display: inline-block;">
            <div style="font-size: 14px;">
                <div>预计执行员工:        {{item_yuji_count}}</div>
                <div style="margin-top: 10px;">已未执行员工:        {{sended_yuangong}}</div>
                <div style="margin-top: 10px;">尚未执行员工:        {{no_send_yuangong}}</div>
            </div>
        </el-card>
        <el-card class="box-card" style="display: inline-block;">
            <div style="font-size: 14px;">
                <div>预计群发客户:        {{yuji_kehu}}</div>
                <div style="margin-top: 10px;">发送成功:        {{success_num}}</div>
                <div style="margin-top: 10px;">发送失败:        {{fail_num}}</div>
            </div>
        </el-card>
        
        
        <!-- <el-card class="box-card" style="display: inline-block;">
            <div style="font-size: 14px;">
                <div>发送成功:        8</div>
            </div>
        </el-card> -->

        <!-- <div class="scroll-container" style="margin-top: 10px;border:1px solid #000;margin-left:10px;width:200px;display: inline-block;overflow: hidden;">
            <div class="content">
                <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;" :key="9">
                    <div>
                        <div>发送失败-接收达上限</div>
                        <div>8</div>
                        <div>发送失败-已不是好友</div>
                        <div>5</div>
                    </div>
                </div>
            </div>
        </div> -->

        <h3 style="font-size: 14px;">数据详情</h3>

        <div class="table-wrap">
            <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                stripe default-expand-all>
                <el-table-column prop="aname" label="员工"></el-table-column>
                <el-table-column prop="status" label="发送状态(员工)" show-overflow-tooltip></el-table-column>
                <el-table-column prop="yuji_count" label="预计群发客户数"></el-table-column>
                <el-table-column prop="success_num" label="发送成功"></el-table-column>
                <el-table-column prop="fail_no_friend" label="发送失败-已不是好友"></el-table-column>
                <el-table-column prop="fail_receive_other" label="发送失败-已收到其他群发消息"></el-table-column>
            </el-table>
        </div>




    </div>


</template>


<script>
    import {
        get_plan_detail,
    } from '@/api/scrm/qunfa/qunfa';
    import debounce from '@/common/debounce.js'
    import PersButton from '@/components/PersButton';

    export default {
        components: {
            PersButton,
            // Editor
        },
        data() {
            return {
                success_num:0,
                fail_num:0,
                item_yuji_count:'',
                tableData: [],
                plan_info: [],
                plan_info_table: [],
                content2: "",
                activeName: 'first',
                chose_num: 0,
                chose_info: [],
                radio1: 0,
                tiaojian: {
                    type: 'all',
                },

                textarea: '',
                title: '',
                wx_name2: '',
                sender: this.$route.query.sender,
                sendername: this.$route.query.sendername,
                senddata_count: 0,
                senddata: [],
                addbiaoqianform: {
                    title: ''
                },
                addbiaoqianform2: {
                    title: ''
                },
                addbiaoqianform3: {
                    title: ''
                },
                addbiaoqianform4: {
                    title: ''
                },
                formLabelWidth: '120px',
                biaoqianlist: [],
                biaoqianlist_hav: [],
                biaoqianlist_hav_count: 0,

                biaoqianlist_qiye: [],
                biaoqianlist_hav_qiye: [],
                biaoqianlist_hav_count_qiye: 0,

                biaoqianlist_qiye_no: [],
                biaoqianlist_hav_qiye_no: [],
                biaoqianlist_hav_count_qiye_no: 0,

                biaoqianlist_kehu: [],
                biaoqianlist_hav_kehu: [],
                biaoqianlist_hav_count_kehu: 0,


                biaoqianopen: false,
                yuangongopen: false,
                xuan_biaoqian_open: false,
                xuan_biaoqian_open_no: false,
                xuan_biaoqian_open_kehu: false,
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                adddate: '',
                liveId: this.$route.query.liveId,
                venue: this.$route.query.venue,
                content: {
                    sender: this.$route.query.sender,
                    liveId: this.$route.query.liveId
                },
                ordertime_biaoqianopen: false,
                ordertime_adddate: '',
                ordertime_biaoqianlist: [],
                ordertime_biaoqianlist_hav: [],
                ordertime_biaoqianlist_hav_count: 0,

                ordertime_biaoqianlist_qiye: [],
                ordertime_biaoqianlist_hav_qiye: [],
                ordertime_biaoqianlist_hav_count_qiye: 0,
                senddata_zhujiao: [],

                tab_name: 'first',
                quill_info: '',
                plan_id: '',
                no_send_yuangong:0,
                sended_yuangong:0,
                yuji_kehu:0,
            }
        },
        created() {
            // 或者通过$route获取参数
            this.init();


        },

        methods: {
            init() {
                this.loading = true;
                this.tiaojian.type = 'all'
                this.plan_id = this.$route.query.plan_id
                console.log('我是传递进来的plan-id', this.plan_id)
                console.log('login信息', this.$store.getters.Login)

                get_plan_detail(this.plan_id).then((res) => {
                    console.log('我是父组件的富文本内容11', res.data.plan_info.content)
                    this.tableData = res.data.item_info
                    this.plan_info = res.data.plan_info
                    this.item_yuji_count = res.data.item_yuji_count
                    this.no_send_yuangong = res.data.no_send_yuangong
                    this.sended_yuangong = res.data.sended_yuangong
                    
                    this.yuji_kehu = res.data.yuji_kehu
                    this.plan_info_table = res.data.plan_info_table
                    this.success_num = res.data.success_num
                    this.fail_num = res.data.fail_num
                    this.loading = false;
                })

            },

            test() {
                console.log('我是富文本的内容=', this.quill_info)
            },
            handleClick(tab, event) {
                console.log('我是第几个标签', tab.name)
                if (tab.name == 'first') {
                    this.tab_name = 'first'
                    this.tiaojian.type = 'all'
                    get_client(this.tiaojian).then((res) => {
                        console.log('全部客户', res);
                        this.chose_num = res.data.count
                        this.chose_info = res.data.data
                    })
                } else if (tab.name == 'second') {
                    this.tab_name = 'second'
                    this.chose_num = 0
                } else if (tab.name == 'third') {
                    this.tab_name = 'third'
                    this.chose_num = 0
                }
            },



            goback() {

                this.$router.back();
            },
            savepublish() {

                let tags = [];
                let tags2 = [];
                let tags3 = [];
                let tags4 = [];

                console.log('我是哪个模块-------', this.tab_name)

                if (this.tab_name == 'second') {
                    this.biaoqianlist_hav_kehu = []
                }

                if (this.tab_name == 'third') {
                    this.biaoqianlist_hav = []
                    this.biaoqianlist_hav_qiye = []
                    this.biaoqianlist_hav_qiye_no = []
                }

                //员工
                this.biaoqianlist_hav.forEach(element => {
                    tags.push(element.tags.tagid);
                });
                //含有标签
                this.biaoqianlist_hav_qiye.forEach(element => {
                    tags2.push(element.tags.tagid);
                });
                //不含标签
                this.biaoqianlist_hav_qiye_no.forEach(element => {
                    tags3.push(element.tags.tagid);
                });
                //选择客户
                this.biaoqianlist_hav_kehu.forEach(element => {
                    tags4.push(element.groups.groupid + "*" + element.tags.tagid);
                });



                let data_save = {
                    "quill_info": this.quill_info,
                    "chose_info": this.chose_info,
                    "title": this.title,
                    "tab_name": this.tab_name,
                    "plan_id": this.$route.query.plan_id,


                    "tags": this.biaoqianlist_hav,
                    "tags2": this.biaoqianlist_hav_qiye,
                    "tags3": this.biaoqianlist_hav_qiye_no,
                    "tags4": this.biaoqianlist_hav_kehu,
                }

                update_plan(data_save).then((res) => {
                    console.log(res);
                    this.$router.back();
                })




            }



        }

    }
</script>

<style lang="scss" scoped>
    .biaoqian_content {
        display: flex;
        width: 100%;
    }

    .biaoqian_content2 {
        display: flex;
        width: 100%;
    }

    .biaoqian_left_content {
        margin: 10px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(241, 241, 241);
        display: flex;
        flex-direction: column;
        width: 60%;
        overflow-y: scroll;
        /* 启用垂直滚动 */
        max-height: 500px;
        overflow: auto;
        /* 隐藏滚动条 */
        padding: 20px;
    }

    .biaoqian_right_content {
        margin: 10px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(180, 180, 180);
        display: flex;
        flex-direction: column;
        width: 30%;
        overflow-y: scroll;
        /* 启用垂直滚动 */
        max-height: 500px;
        overflow: auto;
        /* 隐藏滚动条 */
        padding: 20px;
    }

    .biaoqian_right_content2 {
        margin: 10px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(180, 180, 180);
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow-y: scroll;
        /* 启用垂直滚动 */
        max-height: 500px;
        overflow: auto;
        /* 隐藏滚动条 */
        padding: 20px;
    }

    .biaoqian_left_content_title {
        display: flex;
    }

    .biaoqian_left_content_content_item_title {
        font-weight: bold;
    }

    .biaoqian_left_content_content {
        display: flex;
        flex-direction: column;
    }

    .biaoqian_left_content_content_item {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }

    .biaoqian_left_content_content_item_content2 {
        display: flex;
        margin-bottom: 10px;
        flex-wrap: wrap;
        margin-top: 10px;
    }

    .biaoqian_left_content_content_item_content {
        display: flex;
        padding: 2px;
        margin-left: 10px;
        margin-left: 10px;
    }

    .biaoqian_left_content_content_item_content_title {
        border-color: #dfdfdf;
        border-width: 1px;
        border-style: solid;
        margin: 5px;
        padding: 5px;
        border-radius: 5px;
    }

    .biaoqian_left_content_content_item_content_title2 {
        border-color: blue;
        border-width: 1px;
        border-style: solid;
        margin: 5px;
        padding: 5px;
        border-radius: 5px;
    }

    .biaoqian_right_content_item_top {
        margin-top: 10px;
        margin-bottom: 10px;
        color: red;
    }

    .biaoqian_right_content_item_top2 {
        margin-top: 2px;
        margin-bottom: 10px;
        color: red;
    }

    .biaoqian_right_content_item {
        display: flex;
        flex-direction: column
    }

    .biaoqian_right_content_item_contnet {
        display: flex;
        margin-bottom: 10px;
        flex-wrap: wrap;
        justify-content: space-evenly;
        margin-top: 10px;
    }

    .biaoqian_right_content_label {
        border-color: rgb(245, 247, 251);
        border-width: 1px;
        border-style: solid;
    }

    .demonstration {
        width: 100px;
    }

    .renyuan_content {
        display: flex;
        width: 100%;
    }

    .yaoyue_neirong_content {
        display: flex;
    }


    .yaoyue_neirong_content_body {
        display: flex;
        flex-direction: column;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(180, 180, 180);
        padding: 10px;
        margin-left: 10px;
        width: 90%;
    }

    .yaoyue_neirong_content_title {
        width: 50%;
    }

    .yaoyue_neirong_content {
        width: 80%;
    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
        line-height: 36px;
        font-size: 12px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }



    .scroll-container {
        display: inline-block;
        margin-top: 10px;
        width: 13%;
        height: 100px;
        /* 设置容器宽度 */
        overflow-x: hidden;

        /* 使得当内容宽度超过容器宽度时可以横向滚动 */
    }

    .content {
        display: flex;
        white-space: nowrap;
        /* 防止内容换行 */
        padding: 5px;
    }

    .plan_jishu {
        color: black;
        font-weight: bold;
        font-size: large;
    }
</style>